@use 'sass:map';

@use '@/assets/styles/common/var.scss' as *;
@use '@/assets/styles/mixins/_button.scss' as *;
@use '@/assets/styles/mixins/mixins.scss' as *;
@use '@/assets/styles/mixins/utils.scss' as *;
@use '@/assets/styles/mixins/_var.scss' as *;

@include b(application) {
    position: relative;
    padding: 20px 0;
    text-align: center;

    @include when(remove) {
        .icon {
            animation: ios-shake 2s ease-in-out infinite;
        }
    }

    @include when(add) {
        .icon {
            animation: ios-shake 2s ease-in-out infinite;
        }
    }


    .status-button {
        position: absolute;
        top: 10px;
        right: 30px;
        width: 30px;
        height: 30px;
        border-radius: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.8;
    }

    .icon {
        width: 108px;
        height: 108px;
        padding: 20px;
        box-sizing: border-box;
        border-radius: $tts-base-unit;
        display: inline-block;
        background: rgba(200, 201, 204, 0.1);
    }

    .label {
        line-height: 3;
        font-size: 20px;
        color: $tts-text-assist;
    }

    @keyframes ios-shake {
        0%, 100% {
            transform: translateX(0) rotate(0);
        }
        10% {
            transform: translateX(-1px) rotate(-0.5deg);
        }
        20% {
            transform: translateX(1px) rotate(0.5deg);
        }
        30% {
            transform: translateX(-1px) rotate(-0.5deg);
        }
        40% {
            transform: translateX(1px) rotate(0.5deg);
        }
        50% {
            transform: translateX(-1px) rotate(-0.5deg);
        }
        60% {
            transform: translateX(1px) rotate(0.5deg);
        }
        70% {
            transform: translateX(-1px) rotate(-0.5deg);
        }
        80% {
            transform: translateX(1px) rotate(0.5deg);
        }
        90% {
            transform: translateX(-1px) rotate(-0.5deg);
        }
    }
}
